
<template>
  <div class="haohaoxing" ref="homePage">
    <div class="bj">
      <van-nav-bar
        @click-left="clickleft"
        style="background: #ececec;"
        title="陇南好行"
        left-text
        left-arrow
      >
        <!-- <div slot="right" class="searcha"> -->
      </van-nav-bar>
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <img width="100%" src="../../assets/Onecardtour/haohaoxing.jpg" />
    <div class="list">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了哦" @load="onLoad">
        <div
          class="commodity"
          @click="commodity(itme.resSN)"
          v-for="(itme,index) in datalist"
          :key="index"
        >
          <div class="commodity-img">
            <img :src="itme.Cover" />
          </div>
          <div class="commodity-details">
            <div class="details-teile">
              <span style="color: rgb(40, 40, 40);">{{itme.Name}}{{itme.TypeStr}}</span>&#8194;
              <span style="color: #46d0ca;">{{itme.Score}}分</span>
            </div>
            <div style="display: flex;">
              <div style="margin-left: 5px;">
                <van-tag
                  v-for="(data,index) in itme.Tags"
                  :key="index"
                  style="border: 1px solid;margin-right: 4px;"
                  size="20px"
                  plain
                  color="#46d0ca"
                >{{data}}</van-tag>
              </div>
            </div>
            <div class="deleted-content">
              <p>{{itme.Info}}</p>
            </div>
            <div class="deleted-km">
              <p>距您{{distance}}KM</p>
              <div style="width: 40%;text-align: center;">
                <span style="font-size: 20px; color: #46d0ca;">￥7</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- <v-min></v-min> -->
  </div>
</template>

<script>
// import city from '@/assets/js/city.js'
// import AMap from "AMap"
// import min from '@/views/Min.vue'
import { resourceList } from "@/api/home.js";
export default {
  components: {
    // "v-min": min,
  },
  // watch: {
  //   ass: function(val) {
  //     console.log(val)
  //   }
  // },
  data() {
    return {
      clintHeigth: "", //获取页面高度
      //头部
      datalist: [], //模拟数据
      loading: false, //控制上拉加载的加载动画
      finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
      // isLoading: false, //控制下拉刷新的加载动画
      totalPage: 0,
      pageNumber: 0, //自定义一个变量
      distance: 0 //距离
    };
  },
  methods: {
    onLoad() {
      let self = this;
      // let mylan = this.lan +','+this.lat
      // console.log(this.lan)
      setTimeout(() => {
        let data = {
          PageNo: self.pageNumber + 1,
          // MyLng: mylan, //经纬度
          Category: 1
        };
        resourceList(data).then(res => {
          console.log(res);
          self.totalPage = res.PageCount;
          if (res.List.length > 0) {
            self.datalist = self.datalist.concat(res.List);
          } else {
            this.datalist = res.List;
          }
          self.loading = false;
          self.pageNumber++;
          if (self.pageNumber >= self.totalPage) {
            self.finished = true;
          }
        });
      }, 500);
    },
    //点击跳转
    clickleft() {
      this.$router.go(-1);
    },
    commodity(resSN) {
      this.$router.push({
        path: "/Scenic/product",
        query: {
          resSN: resSN
        }
      });
    },

    getDistance(lat1, lng1, lat2, lng2) {
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (lat2 * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      var s =2 *Math.asin( Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2) ));
      s = s * 6378.137; // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      return s;
    }
  },
  mounted() {
    this.clientHeight = `${document.documentElement.clientHeight}`; //document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + "px";
    this.distance = this.getDistance(30.500543,114.333623,30.554609,114.343786)
    //console.log(this.partInfo);
  }
};
</script>
<style lang="scss">
.haohaoxing {
  background: white;
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .search {
    width: 80%;
    margin: 0 auto;
    display: flex;
    background: white;
    height: 40px;
    border: 1px solid #00cba6;

    .search_cs {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
    }

    .search_in {
      display: flex;
      align-items: center;
      width: 60%;

      input {
        border: none;
        border-left: 1px solid #999999;
        border-radius: 0 !important;
      }
    }
  }

  .current {
    display: flex;
    padding: 0.625rem 1rem;
    line-height: 2rem;
    font-size: 14px;
    background: #ffffff;
    justify-content: space-between;
    color: #999999;

    .current_box {
      width: 50%;
      display: flex;
      justify-content: space-around;
    }
  }

  .popular {
    .popular_p {
      padding: 10px 16px;
      background: #f5f5f5;
      font-size: 13px;
    }

    .popular_cs {
      width: 80px;
      height: 30px;
      margin: 0.625rem 0.625rem;
      border-radius: 1.875rem;
      border: 1px solid #e4e4e4;
      display: flex;
      font-size: 13px;
      align-items: center;
      justify-content: center;
    }
  }

  .van-index-bar {
    color: #999999 !important;

    .van-index-anchor {
      background: #f5f5f5;
      color: #999999 !important;
      font-weight: 600;
    }

    .van-cell {
      color: #999999 !important;
    }
  }

  .van-popup {
    // top: 0;
    // transform:translate3d(0,0%,0) !important;
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          font-size: 22px;
          color: #46d0ca !important;
        }
      }
    }
  }

  .sort {
    position: fixed;
    position: fixed;
    width: 100%;
    top: 50px;
    z-index: 999;
    .filter {
      width: 100%;
      height: 240px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .filter_neo {
        display: flex;
        flex-direction: column;
        width: 80%;
        height: 40%;

        .van-checkbox-group {
          display: flex;
        }
      }

      .filter_two {
        display: flex;
        flex-direction: column;
        width: 80%;

        // height: 50%;
        .van-checkbox-group {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          div {
            // width: 33%;
            margin-top: 0.3125rem;
          }
        }
      }
    }
  }

  .list {
    .van-list {
      .commodity {
        position: relative;
        display: flex;
        width: 100%;
        height: 11.375rem;
        /* background: #000000; */
        justify-content: center;
        align-items: center;
        border-bottom: 0.0625rem solid #f2f2f2;

        .commodity-img {
          display: flex;
          width: 40%;
          height: 80%;
          /* align-items: center; */
          /*垂直居中*/
          justify-content: center;

          /*水平居中*/
          img {
            display: flex;
            width: 90%;
            height: 90%;
            border-radius: 0.625rem;
          }
        }

        .commodity-details {
          width: 100%;

          /* display: flex; */
          /* justify-content: center; */
          /* align-items: center; */
          .details-teile {
            height: 1.875rem;
            line-height: 1.875rem;
            font-size: 16px;
          }

          .deleted-content {
            width: 95%;
            margin-top: 0.3125rem;
            font-size: 12px;
            color: #909090;
          }

          .deleted-km {
            display: flex;
            justify-content: space-between;
            margin-top: 0.625rem;
            font-size: 12px;
            color: #909090;
          }
        }
      }
    }
  }
}
</style>
